<template>
    <div class="container">
      <a-empty v-if="show == -1" description="未上传材料附件" style="padding-top: 200px" />
      <a-empty v-else-if="show == 0" description="暂不支持查看" style="padding-top: 200px" />
      <div v-else-if="show == 1" class="container">
        <!-- <a-row>
          <a-col span="12">
            批注插件：<a-switch
              v-model="iWebPDFSwitch"
              checked-children="开启"
              un-checked-children="关闭"
              @change="onChange"
            />
          </a-col>
          <a-col span="12" style="text-align: right;padding-right: 10px">
            <a @click="downloadIWebPDFTool"><a-icon type="download" /> 下载批注插件</a>
          </a-col>
        </a-row> -->
        <div class="container2">
          <iWebPDF v-if="iWebPDFSwitch" ref="iWebPDF" />
          <iframe v-else width="100%" height="100%" :src="filePreview(fileurl)+'#view=FitH,top'"></iframe>
        </div>
        <div v-show="resize" class="container3"></div>
      </div>
      <viewer v-else-if="show == 2" :images="imgList" class="container">
        <img v-for="(img, index) in imgList" :key="index" :src="img" class="img-css" />
      </viewer>
      <div v-else-if="show == 3" class="flex-center">
        <audio :src="fileurl" controls="controls" style="width: 80%"></audio>
      </div>
      <div v-else-if="show == 4" class="flex-center">
        <video :src="fileurl" controls="controls" width="100%" height="100%">
          您的浏览器不支持 video 标签
        </video>
      </div>
      <div v-else-if="show == 5" style="width: 100%;height: 100%">
        <vueOfficeDocx :src="fileurl" />
      </div>
    </div>
  </template>
   
  <script>
  import iWebPDF from '@/components/Power/iWebPDF2018/iWebPDF2018.vue'
  import vueOfficeDocx from '@vue-office/docx'
  import '@vue-office/docx/lib/index.css'
  import { downloadIWebPDFTool } from '@/api/iWebPDF/iWebPDF'
  import { downloadFile, filePreview } from '@/utils/util'
  export default {
    props: {
      resize: {
        // 是否在调整宽度
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        attachmentid: null, // 附件id
        filename: null, // 文件名称
        applyid: null, // 主表id
        materialid: null, // 申请材料id/特殊材料表名#字段名
        show: 1, // 1:pdf   2:jpg/jpeg/png
        imgList: [],
        iWebPDFShow: false,
        timer: null,
        fileurl: '',
        iWebPDFSwitch: false
      }
    },
    components: {
      iWebPDF,
      vueOfficeDocx
    },
    methods: {
      /**
       * 文件预览加载
       */
      onLoad(attachmentid, fileurl, filename, applyid, materialid) {
        return new Promise((resolve, reject) => {
          this.clearPollingSave()
          // 切换附件时保存上一个附件的批注
          this.saveFileAnnotate()
          this.iWebPDFShow = false
          if (attachmentid === null) {
            this.show = -1
            resolve(this.iWebPDFShow)
          }
          this.attachmentid = attachmentid
          this.fileurl = fileurl
          this.filename = filename
          this.applyid = applyid
          this.materialid = materialid
          // 获取文件后缀
          let suffix = filename.substring(filename.lastIndexOf('.') + 1).toLowerCase()
          if (suffix == 'pdf') {
            this.show = 1
            if (this.iWebPDFSwitch) {
              this.$nextTick(() => {
                this.iWebPDFShow = this.$refs.iWebPDF.openFile(this.attachmentid, this.fileurl)
                this.pollingSaveFileAnnotate()
                resolve(this.iWebPDFShow)
              })
            } else {
              resolve(this.iWebPDFShow)
            }
          } else if (suffix == 'jpg' || suffix == 'jpeg' || suffix == 'png') {
            this.show = 2
            this.imgList = [fileurl]
            resolve(this.iWebPDFShow)
          } else if (suffix == 'mp3') {
            this.show = 3
            resolve(this.iWebPDFShow)
          } else if (suffix == 'mp4') {
            this.show = 4
            resolve(this.iWebPDFShow)
          } else if (suffix == 'docx') {
            this.show = 5
            resolve(this.iWebPDFShow)
          } else {
            this.show = 0
            resolve(this.iWebPDFShow)
          }
        })
      },
      /**
       * 保存pdf批注文件
       */
      saveFileAnnotate() {
        if (this.iWebPDFShow) {
          this.$refs.iWebPDF.saveFile(this.attachmentid, this.filename, this.applyid, this.materialid)
        }
      },
      bringBackAnnotate() {
        if (this.iWebPDFShow) {
          return this.$refs.iWebPDF.bringBackAnnotate()
        } else {
          return null
        }
      },
      /**
       * 轮询保存pdf批注文件
       */
      pollingSaveFileAnnotate() {
        if (this.iWebPDFShow) {
          this.timer = setInterval(() => {
            this.$refs.iWebPDF.saveFile(this.attachmentid, this.filename, this.applyid, this.materialid)
          }, 60000)
        }
      },
      clearPollingSave() {
        clearInterval(this.timer)
      },
      onChange() {
        this.clearPollingSave()
        if (this.iWebPDFSwitch) {
          this.$nextTick(() => {
            this.iWebPDFShow = this.$refs.iWebPDF.openFile(this.attachmentid, this.fileurl)
            this.pollingSaveFileAnnotate()
            this.$emit('change', this.iWebPDFShow)
          })
        } else {
          this.iWebPDFShow = false
          this.$emit('change', this.iWebPDFShow)
        }
      },
      downloadIWebPDFTool() {
        this.$message.loading({
          content: '批注插件下载中...',
          key: 'IWebPDFDownload',
          duration: 0
        })
        downloadIWebPDFTool()
          .then(res => {
            downloadFile(res, 'iWebPDF2018.exe')
            this.$message.success({
              content: '插件下载成功',
              key: 'IWebPDFDownload',
              duration: 2
            })
          })
          .catch(function(err) {
            console.log(err)
          })
      },
      filePreview(url) {
        return filePreview(url)
      }
    }
  }
  </script>
   
  <style scoped>
  .container {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .container2 {
    width: 100%;
    height: 98%;
    margin-top: 10px;
    position: absolute;
  }
  .container3 {
    width: 100%;
    height: 95%;
    margin-top: 10px;
    position: absolute;
  }
  .img-css {
    width: 100%;
    height: 100%;
    object-fit: scale-down;
    cursor: pointer;
  }
  .flex-center {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  </style>